<!DOCTYPE html>
<html>
<head><style text/css">.top {border: 10px solid #525252;}
.top {background-color: #525252;}
.main {border:  50px solid #525252;}
.main {background-color: #525252;}
.Alliance {border: 10px solid #525252; background-color: #BA0B0B}
.match {border: 10px solid #525252; background-color: #ff7e00}
.title {border: 10px solid #525252; background-color: #ff7e00}
body {font-size: 2.373em; padding: 0; margin: 0;}
.top {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 margin: auto;
 justify-content: center;
 }
.truemain {background-color: #525252} 
.teams {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 margin: auto;
 }
.teamA {margin: 0px 25px 0px 25px}
.teamB {margin: 0px 25px 0px 25px}
.teamC {margin: 0px 25px 0px 25px}
.bigButton {
 background-color: #ff7e00;
 color: #000000;
 width: 200px;
 height: 100px;
 font-size: 80px;
 }
.truemain {
justify-content: center;
}
.teamA {border 10px solid red}
.teamB {border 10px solid red}
.teamC {border 10px solid red}
</style>



<title>Scoring App</title>
</head>
<body>
<div class= truemain>
<form action="Teleop.html">
  <div class="top">
    <!--<image src="http://www.kilkennyarms.com/wp-content/uploads/2012/09/Dark-Diamond-Plate.jpg"</image>-->
    <div class="match">
      <h2>Bridgewater Match 3: 14:57</h2>
    </div>
    <div class="title">
        <h2>Autonomous Mode</h2>
    </div>
    <div class="Alliance">
      <h2 id="Alliance">RED</h2>
    </div>
  </div>
  <div class="main">
    <div class="teams">
      <div class="teamA">
	  <h1 class="team">102</h1>
      <table>
        <tr><td id="0" name="team1" class="table0" onclick="changeImage(0,0)">
		<p class= "text">Robot is in Auto Zone</p>
		</td></tr>
        <tr><td id="1" name="team1" class="table0" onclick="changeImage(1,1)">
		<p class= "text"> Tote in Auto zone</p>
		</td></tr>
        <tr><td id="2" name="team1" class="table0" onclick="changeImage(2,2)">
        <p class= "text"> 1</p>
		</td>
        <td id="3" name="team1" class="table0" onclick="changeImage(3,2)">
		<p class= "text"> 2</p>
		</td>
        <td id="4" name="team1" class="table0" onclick="changeImage(4,2)">
		<p class= "text"> 3</p>
		</td></tr>
        <tr><td id="5" name="team1" class="table0" onclick="changeImage(5,3)">
	    <p class= "text"> Stacked Totes</p>
		</td></tr>
        <tr><td id="6" name="team1" class="table0" onclick="changeImage(6,4)">
		<p class= "text"> Containers in Auto</p>
		</td></tr>
	  </table>
	  </div>
	  <div class="teamB">
      <h1 class="team">75</h1>
      <table>
        <tr><td id="7" name="team2" class="table1" onclick="changeImage(7,5)">
		<p class= "text"> Robot is in Auto Zone</p>
		</td></tr>
        <tr><td id="8" name="team2" class="table1" onclick="changeImage(8,6)">
		<p class= "text"> Tote in Auto zone</p>
		</td></tr>
        <tr><td id="9" name="team2" class="table1" onclick="changeImage(9,7)">
		<p class= "text"> 1</p>
		</td>
        <td id="10" name="team2" class="table1" onclick="changeImage(10,7)">
		<p class= "text"> 2</p>
		</td>
        <td id="11" name="team2" class="table1" onclick="changeImage(11,7)">
		<p class= "text"> 3</p>
		</td></tr>
        <tr><td id="12" name="team2" class="table1" onclick="changeImage(12,8)">
		<p class= "text"> Stacked Totes</p>
		</td></tr>
        <tr><td id="13" name="team2" class="table1" onclick="changeImage(13,9)">
		<p class="text"> Containers in Auto</p>
		</td></tr>
      </table>
	  </div>
	  <div class="teamC">
      <h1 class="team">303</h1>
      <table>
       <tr><td id="14" name="team3" class="table2" onclick="changeImage(14,10)">
	   <p class="text"> Robot is in Auto Zone</p>
	   </td></tr>
       <tr><td id="15" name="team3" class="table2" onclick="changeImage(15,11)">
	   <p class="text"> Tote in Auto zone</p>
	   </td></tr>
       <tr><td id="16" name="team3" class="table2" onclick="changeImage(16,12)">
	   <p class="text"> 1</p>
	   </td>
       <td id="17" name="team3" class="table2" onclick="changeImage(17,12)">
	   <p class="text"> 2</p>
       </td>
       <td id="18" name="team3" class="table2" onclick="changeImage(18,12)">
	   <p class="text"> 3</p>
	   </td></tr>
       <tr><td id="19" name="team3" class="table2" onclick="changeImage(19,13)">
	   <p class="text"> Stacked Totes</p>
	   </td></tr>
       <tr><td id="20" name="team3" class="table2" onclick="changeImage(20,14)">
	   <p class="text"> Containers in Auto</p>
	  </div>
	 </div>
    </div>

  <input class="bigButton" type="submit" name="Next" value="Next">
</form>
</div>

<script>/* Write JavaScript here */</script></body>